<template>
	<div class="app-container">
		<!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="昵称" prop="nickname">
				<el-input v-model="queryParams.nickname" placeholder="昵称" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form> -->

			<el-table v-loading="loading" :data="rsList">
				<el-table-column label="当前在线人数" align="center" prop="numberPeople" />
				<el-table-column width="200" fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" style="padding: 10px 10px;"
							@click="upPrice(scope.row)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
		
			<el-dialog title="修改在线人数" :visible.sync="open" width="600px" append-to-body @close="cancel">
				<el-form ref="form" :model="form" :rules="rules" label-width="80px">
					<el-form-item label="在线人数" prop="numberPeople">
						<el-input v-model="form.numberPeople" placeholder="在线人数" type="number" maxlength="30" />
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</el-dialog>
			
	</div>
</template>

<script>
	import {
		zxListApi,
		zxUpApi
	} from "@/api/all/userApi";
	export default {
		name: "Documentary",
		data() {
			return {
				open:false,
				loading:false,
				rsList:[],
				form: {
					numberPeople: '',
					id: 1
				},
				rules: {
					numberPeople: [{
						required: true,
						message: "请填写在线人数",
						trigger: "blur"
					}],
				}
			};
		},
		created() {
			// console.log(this.$store.state.user.nickName, 'nickName');
			// this.$refs.form.resetFields();
			this.getzxListApi()
		},
		methods: {
			// 修改价格
			upPrice(row) {
				console.log(row, 'row');
				this.form = {
					numberPeople: '',
					id: 1
				}
				this.open = true
			},
			// 弹层取消
			cancel() {
				this.open = false
				this.$refs.form.resetFields();
			},
			getzxListApi(){
				zxListApi().then(res=>{
					console.log(res,'在线人数');
					this.rsList = res.data
				})
			},
			// 弹层确定
			submitForm() {
				console.log(this.form, 'form');
				this.$refs["form"].validate(valid => {
					if (valid) {
						zxUpApi(this.form).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.open = false;
							this.getzxListApi();
						});
					}
				});
			}
		}
	};
</script>
<style>
	.el-tooltip__popper {

		max-width: 800px;

	}

	::v-deep .el-upload-list__item .is-success.focusing .el-icon-close-tip {
		display: none !important;
	}

	.el-upload--picture-card {
		width: 100%;
		height: 100%;
	}

	.el-upload {
		display: block;
	}

	.el-upload-dragger {
		width: 100%;
		height: 100%;
	}
</style>